<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">

      <asideList :active="activeId == item.id " v-for="(item,index) in list" :key="index" @edit="handleEdit(item)" @delete="handleDelete(item.id)" @click="changeClassId(item.id)">
       {{ item.name }}
      </asideList>
    </div>
    <div class="bottom">
      <el-pagination background layout="prev,next" :total="total"  :current-page="currentPage" :page-size="limit " @current-change="getData"/>
    </div>
  </el-aside>
  <Draw ref="draw" @submit="handleSubmit" :title="title">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="排序"  prop="name">
            <el-input-number v-model="form.order" :min="0" :max="999999999" />
          </el-form-item>
     
    </el-form>
    

  </Draw>
</template>
<script setup>
import asideList   from './asideList.vue';
import {getImageClassList,setImageClassList,updateImageClassList,deleteImageClassList} from '@/api/image_class.js'
import {ref,reactive,computed} from 'vue'
import Draw from './draw.vue'

import {Notify} from '@/composables/util.js'

const editId=ref(0)
const title=computed(()=>editId.value? '修改' :'新增')
// 获取数据
const loading = ref(false) 
const list =ref([])
const activeId=ref(0)
// 分页
const currentPage=ref(1)
const total=ref(0)
const limit=ref(10)
function getData(p = null){
  if(typeof p == "number"){
    currentPage.value=p

  }

  // console.log(p);
  loading.value=true
  getImageClassList(currentPage.value).then(res=>{
    // console.log('11112',res)
    total.value=res.totalCount
    list.value=res.list
    console.log(list.value);
    let item=list.value[0]
    if(item){
      console.log(item.id);
      changeClassId(item.id)
      console.log(activeId.value);
    }
  }).finally(res=>{
    loading.value=false
  });
}


getData()
// 获取draw

const draw=ref(null)
 const handleCreate =()=>{
  editId.value=0
  form.name=''
  form.order= 50
  draw.value.open()
 }


//  定义表单相关

const form =reactive({
  name:'',
  order:50

})
const formRef = ref(null)
const rules = {
  name:[
  { required: true, message: '图库分类名称不能为空', trigger: 'blur' }
  ]
}

  
const handleSubmit=()=>{
  console.log(formRef);
  formRef.value.validate((valid) => {
    if (!valid) return
    draw.value.showLoading()
const fun =editId.value? updateImageClassList(editId.value,form):setImageClassList(form)
    console.log('提交');
    fun.then(
      res=>{
        console.log(res);
        Notify( title.value+'成功')
        getData(editId.value?currentPage.value:1)
        draw.value.close()

        
      }
    ).finally(()=>draw.value.closeLoading())

  })
}
// 触发编辑
const handleEdit=(e)=>{
  editId.value=e.id
  console.log(e);
  form.name=e.name
  form.order=e.order
  draw.value.open()
}

// 删除的方法
const handleDelete=(id)=>{
  console.log('删除');
  loading.value=true
  deleteImageClassList(id).then(res=>{
    console.log(res)
    Notify('删除成功')
    getData()
  })
  .finally(
    ()=>loading.value=false
  )
}

const emit=defineEmits(['change'])
// 切换分类
function changeClassId(id){
  console.log(id);
  activeId.value=id
  emit('change',id)

}




defineExpose({
  handleCreate
 })
</script>
<style lang="scss" scoped>
.image-aside{
    border-right: 1px solid #eeeeee;
    position: relative;
 
   
} 
.image-aside .top{
        position: absolute;
        bottom: 50px;
        top: 0;
        left: 0;
        right: 0;
        overflow-y: auto; }

.bottom{
        position: absolute;
        height: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        @apply flex justify-center items-center;

    }
    .aside-list{
        cursor:pointer;
        border-bottom: 1px solid #f4f4f4;
        @apply flex items-center p-3 text-sm text-gray-600;
    }
    .aside-list:hover,.active{
      @apply bg-blue-50;
    }
</style>